<template>
  <div class="complete-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="850px">
      <div class="title" slot="title">完成开单</div>
      <div class="complete-body">
        <div class="body-title">
          <div class="t0"></div>
          <div class="t1">项目</div>
          <div class="t2">类型</div>
          <div class="t3">单价</div>
          <div class="t4">金额</div>
          <div class="t5">已执行/总数</div>
        </div>
        <div v-for="item in medicineData" :key="item.id">
          <div class="complete-item">
            <div class="t0">{{ item.id }}</div>
            <div class="t1 t11">{{ item.project }}</div>
            <div class="t2">{{ item.type }}</div>
            <div class="t3">¥{{ item.price.toFixed(2) }}</div>
            <div class="t4">¥{{ item.amount.toFixed(2) }}</div>
            <div class="t5">{{ item.num }}</div>
          </div>
          <template v-if="item.items">
            <div class="complete-item-children" v-for="child in item.items" :key="child.id">
              <div class="t0"></div>
              <div class="t1 child-name">{{ child.project }}</div>
              <div class="t2">{{ child.type }}</div>
              <div class="t3"></div>
              <div class="t4"></div>
              <div class="t5">{{ child.num }}</div>
            </div>
          </template>
        </div>
        <div class="complete-discount">
          <div class="dis-left">
            <span>折扣金额：100%</span>
            <span class="margin15">折扣金额：0.00</span>
            <span class="margin15">优惠金额：100.00</span>
          </div>
          <div class="dis-right">
            <span>待支付金额</span>
            <span>￥3297.00</span>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'selectCombo',
  data () {
    return {
      dialogVisible: false,
      medicineData: [
        { id: 1, project: '开药 1次', type: '处方', price: 200, amount: 200, num: '1/1' },
        { id: 2, project: '中医体质检测 1次', type: '检查检测', price: 200, amount: 200, num: '1/1' },
        {
          id: 3,
          project: '脏腑气机调衡(套餐)',
          type: '处方',
          price: 2899,
          amount: 200,
          num: '1/1',
          items: [
            { id: 14, project: '项目1  推拿 10次', type: '理疗', price: 200, amount: 200, num: '1/1' },
            { id: 15, project: '项目2 调神针灸 10次', type: '理疗', price: 200, amount: 200, num: '1/1' }
          ]
        },
        {
          id: 4,
          project: '全身经络疏通套餐（套餐）',
          type: '处方',
          price: 200,
          amount: 200,
          num: '1/1',
          items: [
            { id: 23, project: '项目1  推拿 10次', type: '理疗', price: 200, amount: 200, num: '1/1' },
            { id: 76, project: '项目2 调神针灸 10次', type: '理疗', price: 200, amount: 200, num: '1/1' }
          ]
        }
      ]
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.complete-dialog {
  font-size: 14px;
}

.complete-dialog .title {
  border-bottom: 1px solid #e5e1e1;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
}

.complete-dialog .complete-body .body-title {
  display: flex;
  align-items: center;
  background: #F3F6FA;
  padding: 15px 20px;
  font-weight: bold;
}

.complete-dialog .complete-body .complete-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border: 1px solid gainsboro;
  margin-top: -1px;
}

.complete-dialog .complete-body .complete-item-children{
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border: 1px solid gainsboro;
  margin-top: -1px;
}
.complete-dialog .complete-body .complete-item-children .child-name{
  color: rgba(0,0,0,0.45);
}

.complete-dialog .complete-body .complete-discount{
  background: #FFFBF9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px;
}

.complete-dialog .complete-body .complete-discount .dis-left .margin15{
  margin-left: 35px;
}
.complete-dialog .complete-body .complete-discount .dis-right span:first-child{
  font-size: 14px;
  font-weight: 500;
}
.complete-dialog .complete-body .complete-discount .dis-right span:last-child{
  font-size: 18px;
  color: #F76232;
  font-weight: 500;
}

.complete-dialog .complete-body .t0 {
  width: 5%;
}

.complete-dialog .complete-body .t1 {
  width: 30%;
}
.complete-dialog .complete-body .t11 {
  font-weight: bold;
}

.complete-dialog .complete-body .t2 {
  width: 20%;
}

.complete-dialog .complete-body .t3 {
  width: 15%;
}

.complete-dialog .complete-body .t4 {
  width: 15%;
}

.complete-dialog .complete-body .t5 {
  width: 15%;
}

.complete-dialog .btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
